﻿@model WebExtras.DemoApp.Models.Mvc.CoreHtmlViewModel
@{
  ViewBag.Title = "Mvc Gumby Html Helper Extensions";
}

@if (Model.ShowMessage)
{
  @Html.GetLastActionMessage()
}

<h3 class="keep-center">Mvc Gumby Html Helper Extensions</h3>

<div class="row">
  <div class="six columns">
    <div class="row">
      <div class="three columns">
        <strong>Assembly</strong>
      </div>
      <div class="four columns">
        WebExtras.Mvc.dll
      </div>
    </div>
    <div class="row">
      <div class="three columns">
        <strong>Namespace</strong>
      </div>
      <div class="four columns">
        WebExtras.Mvc.Gumby
      </div>
    </div>
  </div>
  <div class="six columns">
    <div class="three columns">
      <strong>Dependancies</strong>
    </div>
    <div class="six columns">
      <ul class="dependancies">
        <li>Appropriate third party libraries</li>
        <li>Gumby 2.5.x</li>
        <li>webextras.gumby.css</li>
      </ul>
    </div>
  </div>
</div>

@{
  Alert[] alerts = Html.GetUserAlerts();
  if (alerts.Length > 0)
  {
  
  <div class="row">
    <div class="twelve columns">
      @foreach (Alert alert in alerts)
      {
        @alert
      }
    </div>
  </div>
  
  }
}

<div class="well">
  <h4>Icon</h4>
  <p>
    Markup
  </p>
  <pre><code>
  @@Html.Icon(EGumbyIcon.Chart_Pie)
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    @Html.Icon(EGumbyIcon.Chart_Pie)
  </div>
</div>

<div class="well">
  <h4>Adding icons to existing elements</h4>
  <p>
    Markup
  </p>
  <pre><code>
  @@Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EGumbyIcon.Check)
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    @Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EGumbyIcon.Check)
  </div>
  <p>
    All available extensions
  </p>
  <pre><code>
  .AddIcon(gumby-icon)                
  .AddIcon(gumby-icon, icon-on-left-flag)
  </code></pre>
</div>

<div class="well">
  <h4>Button styled hyperlinks</h4>
  <p>
    Markup
  </p>
  <pre><code>
  @@Html.Hyperlink("Take me to google", "http://www.google.com")
    .AddIcon(EGumbyIcon.Check)
    .AsButton(EGumbyButton.Info) 
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    @Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EGumbyIcon.Check).AsButton(EGumbyButton.Info, EGumbyButtonStyle.Medium)
  </div>
  <p>
    All available extensions
  </p>
  <pre><code>
  .AsButton(type)
  .AsButton(type, size/style)
  </code></pre>
  @Html.Alert(EMessage.Warning, "Note that this extension can only be used for hyperlinks and button elements", string.Empty, EGumbyIcon.Flag)
</div>

<div class="well">
  <h4>Navbar</h4>
  <p>Markup</p>
  <pre><code>
  @@{
      <span class="comment">// You can use Hyperlink elements or a HtmlList element to render a navbar</span>
      Hyperlink logo = new Hyperlink("Metro Logo", "/").AddCssClass("two columns logo");
      Hyperlink link = new Hyperlink("Link", "#");
      IExtendedHtmlString list = new HtmlList(EList.Unordered, new HtmlListItem[]
      {
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
        HtmlListItem.From(link),
      }).AddCssClass("ten columns");
    }
  @@Html.Navbar(logo, list)
  @@Html.Navbar(logo, link, link, link)
  </code></pre>
  <p>
    Output
  </p>
  <div class="content row">
    <div class="ten columns">
      @{
        Hyperlink logo1 = new Hyperlink("Metro Logo", "/", new { @class = "two columns logo" });
        Hyperlink logo2 = new Hyperlink("Pretty Logo", "/", new { @class = "two columns logo" });
        
        Hyperlink link = new Hyperlink("Link", "#");
        
        HtmlList list = new HtmlList(EList.Unordered, new HtmlListItem[]
        {
          HtmlListItem.From(link),
          HtmlListItem.From(link),
          HtmlListItem.From(link),
          HtmlListItem.From(link),
          HtmlListItem.From(link),
          HtmlListItem.From(link)
        }).AddCssClass("ten columns");
      }

      @Html.Navbar(logo1, list)
      
      @Html.Navbar(logo2, link, link, link).AsPretty()
    </div>
  </div>
  <p>
    All available extensions
  </p>
  <pre><code>
  .AsMetro()
  .AsPretty()
  .FixAt(location)
  .FixAt(location, offset)
  .PinAt(location)
  .PinAt(location, offset)
  </code></pre>
</div>

<div class="well">
  <h4>Tooltips</h4>
  <p>Markup</p>
  <pre><code>
  @@Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")
  @@Html.TooltipFor(f => f.SomeProperty2)
  </code></pre>
  <p>Output</p>
  <div class="content">
    <div class="row">
      <div class="three columns">First call result @Html.Icon(EGumbyIcon.Right_Open_Big) @Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")</div>
      <div class="three columns">Second call result @Html.Icon(EGumbyIcon.Right_Open_Big) @Html.TooltipFor(f => f.SomeProperty2)</div>
    </div>
  </div>
  <p>All available extensions</p>
  <pre><code>
  <span class="comment">// Tooltip text retrieved from the <span class="highlight">System.ComponentModel.DescriptionAttribute</span> added to the view model property</span>
  @@Html.TooltipFor(propertySelector)

  <span class="comment">// Tooltip text retrieved from the function parameter passed in</span>
  @@Html.TooltipFor(propertySelector, tooltipText)
  </code></pre>
</div>

<div class="well">
  <h4>Alerts</h4>
  <p>You can create alert messages using WebExtras extension method</p>
  <p>Usage</p>
  <pre><code>
  @@Html.Alert(EMessage.Success, "Hooray...I am a resounding success")
  @@Html.Alert(EMessage.Warning, "Oops...something went wrong. But no worries, I can still continue", "Note:")
  @@Html.Alert(EMessage.Error, "No dice...something is seriously wrong. I quit", "Error:", EGumbyIcon.Alert)
  @@Html.Alert(EMessage.Information, "No dice...something is seriously wrong. I quit", "Note:", EGumbyIcon.Flag)
  </code></pre>
  <p>Output</p>
  <div class="content">
    @Html.Alert(EMessage.Success, "Hooray...I am a resounding success")
    @Html.Alert(EMessage.Warning, "Oops...something went wrong. But no worries, I can still continue", "Note:")
    @Html.Alert(EMessage.Error, "No dice...something is seriously wrong. I quit", "Error:", EGumbyIcon.Docs)
    @Html.Alert(EMessage.Information, "No dice...something is seriously wrong. I quit", "Note:", EGumbyIcon.Flag)
  </div>
</div>

<div class="well">
  <h4>Action messages</h4>
  <p>
    WebExtras provides a way to add action messages to denote status of action to notify a user. For e.g. you may want to add a message to the user when he is moved to a different
    page on a form submit or on a particular action
  </p>
  <p>Usage</p>
  <pre><code>
  <span class="comment">// In the controller</span>
  using WebExtras.MVC.Bootstrap.Core

  public class HomeController : ControllerBase
  {
    public ActionResult SomeAction()
    {
      SomeModel model = new SomeModel();
      return <span class="highlight">this.</span>View("myview", model, "Your action was successful");
    }

    public ActionResult SomeOtherAction()
    {
      SomeModel model = new SomeModel();
      return <span class="highlight">this.</span>RedirectToAction(myActionResult, "Your action failed", EActionMessage.Error);
    }
  }

  <span class="comment">// In the view</span>
  @@Html.GetLastActionMessage()
  </code></pre>
  <p>Output</p>
  <div class="content">
    <span class="comment">// Click the link below to see an action message demo.
      <br />
    </span>
    <span class="comment">// Action messages by default appear on the top right corner of the screen.
      <br />
    </span>
    <span class="comment">// It's position can be controlled via CSS though. See the accompanying webextras.css file.
      <br />
    </span>
    <br />
    @Html.Hyperlink("Action Successful Message Demo", MVC.Gumby.Mvc.ActionMessageDemo(true))
    &nbsp;&nbsp;&nbsp;&nbsp;
    @Html.Hyperlink("Action Error Message Demo", MVC.Gumby.Mvc.ActionMessageDemo(false))
  </div>
</div>

<div class="well">
  <h4>User Alerts</h4>
  <p>
    While there can only be one action message per controller action, WebExtras also allows you to add multiple
    user alerts which can then be retrieved and displayed from the view.
  </p>
  <p>Usage</p>
  <pre><code>
  <span class="comment">// in your controller</span>
  public ActionResult SomeAction()
  {
    ....
    Alert alert = new Alert(...);
    ....
    this.SaveUserAlert(alert);
    ....
    return View()
  }
    
  <span class="comment">// and then in your view</span>
  @@{
    Alert[] alerts = Html.GetUserAlerts();
  
    foreach(Alert alert in alerts)
    {
      @@alert
    }
  }
  </code></pre>
  <p>Output</p>
  <div class="content">
    <span class="comment">// Click the link below to see an user alerts demo.
      <br />
    </span>
    <span class="comment">// User alerts will be shown at the top of the page.
      <br />
    </span>
    <br />
    @Html.Hyperlink("User Alerts Demo", MVC.Gumby.Mvc.UserAlertsDemo())
  </div>
</div>
